<template>
  <el-dialog v-if="dialogVisiable" v-model="dialogVisiable" title="脚本及参数设置" width="1000px" append-to-body>
    <div class="block-title">基本信息</div>
    <el-form inline :model="dialogForm" label-width="100">
      <el-form-item label="脚本名称：">{{ dialogForm.name }}</el-form-item>
      <el-form-item label="所属载荷：">{{ dialogForm.folder }}</el-form-item>
    </el-form>
    <div class="block-title">参数</div>
    <JsonSchemaElement ref="jsonSchemaElementRef" :key="key" :data="formData" :schema="schemaInfo" :disabled="type === 'view'" />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">关闭</el-button>
        <el-button type="primary" @click="saveDialog">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="ScriptDetailDialog" lang="ts">
import { runChainDetail, editRunChainParams } from '@/api/loadProcessingAlgorithm/experimentResultStatistic/index';
import JsonSchemaElement from './jsonSchemaElement.vue';
const dialogVisiable = ref(false);
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const dialogForm = reactive({
  folder: '',
  name: '',
  uniqueKey: '',
  taskParams: {}
});
const type = ref('view');
const dataId = ref();
const formData = ref({});
const schemaInfo = ref();
const key = ref(0);
const jsonSchemaElementRef = ref();
const selectScriptParameterDialogRef = ref();
const closeDialog = () => {
  dialogVisiable.value = false;
};
const initData = () => {
  runChainDetail(dataId.value).then((res) => {
    const data = res.data.chainParamVo;
    dialogForm.name = data.name;
    dialogForm.folder = data.folder;
    dialogForm.uniqueKey = data.uniqueKey;
    dialogForm.taskParams = data.taskParams;
    schemaInfo.value = data.taskParamSchemas.properties.taskChainParam.prefixItems.map((item) => {
      return item.properties.taskParams;
    });
    formData.value = data.taskParams.taskChainParam.map((item, index) => {
      return item.taskParams;
    });
  });
};
const openDialog = async (dataType, id) => {
  type.value = dataType;
  dataId.value = id;
  initData();
  key.value += 1;
  dialogVisiable.value = true;
};
const saveDialog = () => {
  const taskChainParam = dialogForm.taskParams.taskChainParam.map((item, index) => {
    const data = jsonSchemaElementRef.value.getData();
    item.taskParams = data[index];
    return item;
  });
  const obj = {
    id: dataId.value,
    name: dialogForm.name,
    uniqueKey: dialogForm.uniqueKey,
    folder: dialogForm.folder,
    taskParams: {
      taskChainParam
    }
  };
  editRunChainParams(obj).then((res) => {
    proxy?.$modal.msgSuccess('编辑成功！');
    closeDialog();
  });
};
onMounted(() => {
});
defineExpose({
  openDialog
});
</script>

<style lang="scss" scoped>
.block-title {
  color: #1890ff;
  font-size: 14px;
  padding-bottom: 12px;
  display: flex;
  align-items: center;
  margin-left: 8px;
}
.block-title::before {
  content: '';
  width: 3px;
  height: 15px;
  background-color: #48a1f5;
  margin-right: 8px;
}
.dialog-footer {
  text-align: center;
}
</style>
